import React from 'react';
import KeepAliveHoc from '@/components/KeepAliveHoc';
import styles from './index.less';
import { Row, Col } from 'antd';
import DeviceStatistics from './components/DeviceStatistics';
import Area from './components/Area';
import OpenDoorStatistical from './components/OpenDoorStatistical';
import AlarmDoorList from './components/AlarmList';
import ActiveAlarm from './components/ActiveAlarm';
import OpenDoorNumber from './components/OpenDoorNumber';
import AlarmType from './components/AlarmType';

const Counter: React.FC<{}> = () => {
  const height: number = document.body.offsetHeight;
  const width: number = document.body.offsetWidth;
  const ratio: number = height / width;
  console.log(ratio);

  return (
    <div className={styles['index-wrap']} style={ratio > 1.5 ? { maxHeight: width + 'px' } : {}}>
      <div className={styles['index-header-wrap']}>
        <Row gutter={16} style={{ height: '100%' }}>
          <Col span={16}>
            <div className={styles['device-status']}>
              <DeviceStatistics />
            </div>
          </Col>
          <Col span={8}>
            <div className={styles['open-door-number']}>
              <OpenDoorNumber />
            </div>
          </Col>
        </Row>
      </div>
      <div className={styles['index-content-wrap']}>
        <div className={styles['chart-wrap']}>
          <Row gutter={16} style={{ height: '100%' }}>
            <Col span={12} style={{ height: '100%' }}>
              <div className={styles['visitor-statistics']}>
                <Area />
              </div>
            </Col>
            <Col span={12} style={{ height: '100%' }}>
              <div className={styles['open-door-statistics']}>
                <OpenDoorStatistical />
              </div>
            </Col>
          </Row>
        </div>
        <div className={styles['alarm-wrap']}>
          <Row gutter={16} style={{ height: '100%' }}>
            <Col span={12} style={{ height: '100%' }}>
              <div className={styles['active-alarm']}>
                {' '}
                <ActiveAlarm />
              </div>
            </Col>
            <Col span={6} style={{ height: '100%' }}>
              <div className={styles['alarm-list']}>
                <AlarmDoorList />
              </div>
            </Col>
            <Col span={6} style={{ height: '100%' }}>
              <div className={styles['alarm-type']}>
                <AlarmType />
              </div>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  );
};
export default KeepAliveHoc(Counter);
